//3.月办理总量--echarts
/*参数data:
  var data = {
    name:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    value:[300, 450, 770, 203, 255, 188, 156, 450, 650, 676, 389, 578]
  };
*/

var MD03 = {
  f1:12*KO,
  f2:16*KO,
  W:0,
  H:0,
  md:null,
  init:function(el,data){
    // if(el){
    //   this.W = el.offsetWidth;
    //   this.H = el.offsetHeight;
    // }
    // if(this.md){
    //   this.md.setOption({
    //     series: [
    //       { data: data.zhu1 }, 
    //       { data: data.zhu2 }, 
    //       { data: data.zhu3 }
    //     ]
    //   })
    //   return false;
    // }else{
      this.myecharts(el,data)
    // }
  },
  myecharts: function(el,data) {   
    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label:{
                show:true,
                backgroundColor: '#FFED27',
                fontSize:this.f1,
                color:'#001A53'                  
              }
            },
            textStyle:{
              fontSize:this.f2
            },
            formatter:'{b}：<span style="color:#FFED27;">{c}</span>',
            padding:[5*KO,10*KO]
        },
        grid: {
            top: 'middle',
            left: '0%',
            right: '10%',
            bottom: '3%',
            height: '80%',
            containLabel: true
        },
        calculable : true,
        xAxis: [{
            type: 'category',
            data: data.name,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            },
            axisLabel: {
                interval:0,      //强制显示所有刻度标签
                margin:10*KO,       //刻度标签与轴线之间的距离。
                color: '#e2e9ff',
                textStyle: {
                    fontSize: this.f1
                },
            },
        }],
        yAxis: [{
            axisLabel: {
                margin:20*KO,       //刻度标签与轴线之间的距离。
                formatter: '{value}',
                color: '#e2e9ff',
                textStyle: {
                    fontSize: this.f1
                },
            },
            axisLine: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            }
        }],
        series : [
            {
              type:'line',
              // min:10,
              // max:40,
              data:data.value,
  
              lineStyle: {
                    normal: {
                        width: 2*KO,
                        color: {
                            type: 'linear',

                            colorStops: [{
                                    offset: 0,
                                    color: '#AAF487' // 0% 处的颜色
                                },
                                {
                                    offset: 0.4,
                                    color: '#47D8BE' // 100% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#47D8BE' // 100% 处的颜色
                                }
                            ],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(71,216,190, 0.5)',
                        shadowBlur: 10,
                        shadowOffsetY: 7
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'yellow',
                        borderWidth: 5*KO,
                        borderColor: "#65FFFF"
                    }
                },
                smooth: true,
                label:{
                    show:true,
                    color:'#65FFFF',
                    fontSize:this.f1
                },

                // markPoint : {
                //     symbolSize:100,
                //     data : [
                //         {type : 'max', name: '最大值',itemStyle:{normal:{color:'green'}},label:{fontSize:20}},
                //         {type : 'min', name: '最小值',itemStyle:{normal:{color:'#962B3A'}},label:{fontSize:20}}
                //     ]
                // },
                // markLine : {
                //     data : [
                //         // {type : 'average', name : '平均值', itemStyle:{normal:{color:'green'}},label:{ formatter:'{b}:{c}',fontSize:20}},
                //         {type : 'average', name : '平均值', itemStyle:{normal:{color:'#0BBFDE'}},label:{ formatter:'{c}',fontSize:this.f1}},
                //     ]
                // },
                markLine: {
                    // silent: true,
                    symbol: "none",
                    // label: {
                    //     position: "middle",
                    //     formatter: "{b}"
                    // },
                    data: [{
                        type:'average',
                        name: "平均值",
                        // yAxis: 80,
                        lineStyle: {
                            color: "#ffc832"
                        },
                        label: {
                            fontSize: this.f1,
                            position: "end",
                            formatter: "{b}\n {c}"
                        }
                    }]
                } 
            }
        ]
    };

    // 基于准备好的dom，初始化echarts实例
    this.md = echarts.init(el);
    // 使用刚指定的配置项和数据显示图表。
    this.md.setOption(option);
  }
}





    // var option = {
    //     title: {
    //         text: tem3Data2.title,
    //         left: 'center',
    //         top:20,
    //         textStyle:{
    //             color:'#7CC1F9',  
    //             fontSize:45          
    //         }
    //     },
    //     tooltip : {
    //         trigger: 'axis',
    //         formatter:function(prm){
    //           var name = prm[0].name;
    //           var html =  
    //           '<div style="font-size:45px;line-height:60px;padding:40px;">'+
    //           '<div style="color:#80C6FF;font-weight:bold;">'+name+'日</div>'+
    //           '办件数量：<span style="color:yellow">'+prm[0].value+'</span><br>'+
    //           '便民服务：<span style="color:yellow">'+prm[1].value+'</span></div>';
    //            return html;
    //       }   
    //     },
    //     grid: [{
    //         left: 120,
    //         right: 180,
    //         top:90,
    //         height: '70%'
    //     }],
    //     toolbox: {
    //         show : true,
    //         feature : {
    //             mark : {show: true},
    //             magicType : {show: true, type: ['line', 'bar']},
    //         }
    //     },
    //     calculable : true,
    //     xAxis : [
    //         {
    //             name:"日期",
    //             type : 'category',
    //             nameTextStyle: { //坐标轴名称样式
    //               color: "#fff",
    //               fontSize: "20",
    //               backgroundColor: "" //文字块背景色
    //             },
    //             // boundaryGap : false,
    //             axisLine:{symbol:['none', 'arrow'], lineStyle:{color:'#fff'}},  //轴线末端显示箭头
    //             axisTick:{
    //                 alignWithLabel:true               //标签文字与刻度对齐
    //             },
    //             axisLabel:{
    //                 interval:0,      //强制显示所有刻度标签
    //                 rotate:30,       //标签旋转30度
    //                 margin:14,       //刻度标签与轴线之间的距离。
    //                 textStyle: {
    //                     color: function (value, index) {
    //                         // return value >= 0 ? 'green' : 'red';
    //                         // if(index === 0) return 'red';
    //                         // if(index === 1) return 'green';
    //                         return '#fff'
    //                     },
    //                     fontSize:20
    //                 }
    //             },  
    //             splitLine:{
    //                 show:true,
    //                 lineStyle:{
    //                     type:'solid',
    //                     width:1,
    //                     color:'rgba(255,255,255,0.1)'
    //                 }
    //             },              
    //             data : tem3Data2.arr1
    //         }
    //     ],
    //     yAxis : [
    //         {
    //             name:"数量",
    //             type : 'value',
    //             nameTextStyle: { //坐标轴名称样式
    //               color: "#fff",
    //               fontSize: "20",
    //               backgroundColor: "" //文字块背景色
    //             },
    //             max:20000,
    //             min:5000,
    //             axisLine:{symbol:['none', 'arrow'],lineStyle:{color:'#fff'}},
    //             // boundaryGap : false,
    //             splitLine:{
    //                 show:true,
    //                 lineStyle:{
    //                     type:'solid',
    //                     width:1,
    //                     color:'rgba(255,255,255,0.1)'
    //                 }
    //             }, 
    //             axisLabel:{
    //               textStyle: {
    //                   fontSize:20
    //               }
    //             }
    //         }
    //     ],
    //     series : [
    //         {
    //             name:'办件数量',
    //             type:'line',
    //             symbol:'emptyCircle',
    //             itemStyle: {
    //                 normal: {
    //                     lineStyle: {            // 系列级个性化折线样式，横向渐变描边
    //                         width: 2,
    //                         color: 'green',
    //                         shadowColor : 'rgba(0,0,0,0.5)',
    //                         shadowBlur: 10,
    //                         shadowOffsetX: 8,
    //                         shadowOffsetY: 8
    //                     }
    //                 },
    //                 emphasis : {
    //                     label : {show: true}
    //                 }
    //             },
    //             label:{
    //                 show:true,
    //                 color:'#2FC0FF',
    //                 fontSize:20
    //             },
    //             data:tem3Data2.arr2
    //         }
    //     ]
    // };













